<template>
    <div class="item-color-font">
        <div class="center">字体大小：
            <el-select v-model="text.f" placeholder="请选择" size="small">
                <el-option label="14px" :value="14"></el-option>
                <el-option label="16px" :value="16"></el-option>
                <el-option label="18px" :value="18"></el-option>
                <el-option label="24px" :value="24"></el-option>
                <el-option label="30px" :value="30"></el-option>
            </el-select>
        </div>
        <div class="center item-font">
            字体设置：
            <el-color-picker v-model="text.c" size="mini"></el-color-picker>
            <el-tooltip class="item" effect="dark" content="加粗" placement="top" >
                <i @click="text.b = !text.b" :class="['iconfont iconjiacu', text.b?'iconfont-active':'']" ></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="下划线" placement="top" >
                <i @click="text.u = !text.u" :class="['iconfont iconfuwenbenbianjiqi_xiahuaxian',text.u?'iconfont-active':'']"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="斜体" placement="top" >
                <i @click="text.i = !text.i" :class="['iconfont iconxieti',text.i?'iconfont-active':'']"></i>
            </el-tooltip>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        text:{
            type: Object
        }
    }
}
</script>

<style lang="scss" scoped>
.item-color-font{font-size: 13px;color: #666;
    .iconfont{margin-left: 10px;font-weight: bold;cursor: pointer;
        &-active{color: #409EFF}
    }
}
</style>
